<template>
  <div class="shoplist">
    <ul>
      <li v-for="item in shoplist" :key="item.id">
        <img :src="item.src">
        <div>
          <p>{{item.title}}</p>
          <p>￥{{item.price}}</p>
          <button @click="add(item)">加入购物车</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapState} from "vuex"

  export default {
    name: 'ShopList',
    // 可以通过computed计算属性获取store中的数据
    // computed: {
    //   shoplist() {
    //     return this.$store.state.shoplist
    //   }
    // },

    // vuex提供了mapState辅助函数，可以简化computed计算属性的写法
    computed: mapState(['shoplist']),
    methods: {
      add(item) {
        this.$store.commit('add',item)
      }
    }
  }
</script>

<style scoped>
  .shoplist {
    padding-bottom: 50px;
  }

  li {
    display: flex;
    padding: 10px;
    border-bottom: 1px dashed #ccc;
  }

  .shoplist div {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  img {
    width: 25%;
    border: 1px solid #ccc;
  }

  li div p:first-child {
    font-size: 14px;
  }

  li div p:nth-child(2) {
    color: #f00;
  }

  button {
    color: white;
    background-color: coral;
    border: none;
    width: 80px;
    height: 25px;
  }
</style>
